<template>
  <div class="scrollbox">
    <!-- 头部 -->
    <v-header></v-header> 
    <div class="dis10"></div>   
    <div class="listbox aps8"> 
      <v-list api="resources_model.get_model_list" ref="list" cards="1" cols="120,0,130" :params="params" :hidSearch="true">
        <template slot="search">
          <el-button class="operate" size="small" type="primary" icon="el-icon-plus" @click="edit(params)">新增模型
          </el-button>
          &nbsp;&nbsp;&nbsp;
          <el-select v-model="params.type" size="small">
            <el-option :value="index" :label="item" v-for="(item, index) in $config('resources_type')" :key="index"></el-option>
          </el-select>

          <span class="fr">
          <el-button class="operate" size="small" type="default" @click="refresh">清除缓存
          </el-button>
          </span>
        </template>
        <template slot="head" slot-scope="props">
          <thead>
            <tr class="tr">
              <th class="c1">名称</th>
              <th>配置项</th>
              <th>操作</th>
            </tr>
          </thead>
        </template>
        <template slot="item" slot-scope="props">
          <tr>
            <td class="c1">
                <span class="font-blue f14">{{props.item.name}}</span>
            </td>
            <td class="font-gray">
              <div class="resources-items-box">
                <div class="resources-item" v-for="(v, k) in props.item.items" :key="k">
                 <span class="font-black item-name fl"><i class="tag tag-blue" v-if="v.inspec == 1">规</i><i class="tag tag-gray" v-if="v.inattr == 1">属</i>{{ v.name }} </span>
                 <span class="font-gray2 item-ident fl">{{ v.ident }}</span>
                 <span class="font-gray2 item-data fl">
                    <font v-for="(v1, k1) in v.data" :key="k1">
                      {{v1.value}} &nbsp;&nbsp;
                    </font>
                 </span>
                 <span class="fr">
                    <el-button size="mini" icon="el-icon-edit" type="default" circle @click="edititem(v)">
                    </el-button>
                    <el-button size="mini" type="default" icon="el-icon-delete" circle
                        @click="delitem(v)">
                    </el-button>
                  </span>
                  <div class="cl"></div>
                </div>
              </div>
              <div class="dis15"></div>
              <p><el-button size="mini" icon="el-icon-plus" type="primary" @click="edititem({id:0, model_id: props.item.id})"></el-button></p>
            </td>
            <td class="t0">
              <el-button size="mini" icon="el-icon-edit" type="primary" circle @click="edit(props.item)">
              </el-button>
              <el-button size="mini" type="default" icon="el-icon-delete" circle
                  @click="del(props.item)">
              </el-button>
            </td>
          </tr>
        </template>
      </v-list>
    </div>

    <!-- 编辑 -->
    <el-dialog
      :title="editData.title"
      :visible.sync="editData.status"
      width="680px" top="7vh">
      <div class="dialogform">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="right" class="demo-ruleForm">           
          <el-form-item label="模型名称" prop="name">
            <el-input v-model="form.name" class="w300"></el-input>
          </el-form-item>         
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" class="w200"></el-input>
          </el-form-item>
          <el-form-item label="" prop="inlock">
            <el-button type="primary" @click="save">保 存</el-button>
            <el-button @click="editData.status = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="tc">  
      </div>
    </el-dialog>
    <!-- 编辑结束 -->


    <!-- 编辑配置项 -->
    <el-dialog
      :title="editDataItem.title"
      :visible.sync="editDataItem.status"
      width="880px" top="7vh">
      <div class="dialogform">
        <el-form :model="formitem" :rules="itemrules" ref="form2" label-width="120px" label-position="right">           
          <el-form-item label="配置项名称" prop="name">
            <el-input v-model="formitem.name" class="w200"></el-input> 
            &nbsp;&nbsp;&nbsp;序号:
            <el-input v-model="formitem.sort" class="w100"></el-input>
          </el-form-item> 
          <el-form-item label="配置项标识" prop="ident">
            <el-input v-model="formitem.ident" class="w200"></el-input>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-radio-group v-model="formitem.inspec">
              <el-radio label="1">规格</el-radio>
              <el-radio label="0">非规格</el-radio>
            </el-radio-group>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-radio-group v-model="formitem.inattr">
              <el-radio label="1">属性</el-radio>
              <el-radio label="0">非属性</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="">
            <v-editmore
              ref="itemdata"
              name="配置项数据"
              :initdata="formitem.data"
              :newdata="{'key': '', value: ''}"
              >
                <template slot="head">
                    <colgroup>                    
                      <col width="200" />
                      <col />
                      <col width="150" />
                    </colgroup>
                    <thead>
                    <tr class="tr gray">                    
                      <th>标识</th>
                      <th>值</th>
                      <th>-</th>
                    </tr>
                    </thead>
                  </template>
                  <template slot="item" slot-scope="props">
                    <tr>
                      <td><el-input size="mini" v-model="props.item.key"></el-input></td>
                      <td>
                      <el-input size="mini" v-model="props.item.value"></el-input>
                      </td>                     
                      <td>
                          <el-button
                            size="mini"
                            icon="el-icon-top"
                            type="default"
                            circle
                            @click="$refs.itemdata.up(props.index)">
                          </el-button>
                          <el-button
                            size="mini"
                            icon="el-icon-bottom"
                            type="default"
                            circle
                            @click="$refs.itemdata.down(props.index)">
                          </el-button>
                          <el-button
                            size="mini"
                            icon="el-icon-close"
                            type="default"
                            circle
                            @click="$refs.itemdata.del(props.index)">
                          </el-button>
                        </td>
                    </tr>
                  </template>
            </v-editmore>
          </el-form-item> 
          <el-form-item label="">
            <v-editmore
              ref="itemnote"
              name="配置项备注"
              :initdata="formitem.note"
              :newdata="{value: ''}"
              >
                <template slot="head">
                    <colgroup>                    
                      <col />
                      <col width="150" />
                    </colgroup>
                    <thead>
                    <tr class="tr gray">
                      <th>值</th>
                      <th>-</th>
                    </tr>
                    </thead>
                  </template>
                  <template slot="item" slot-scope="props">
                    <tr>
                      <td>
                      <el-input size="mini" v-model="props.item.value"></el-input>
                      </td>                     
                      <td>
                          <el-button
                            size="mini"
                            icon="el-icon-top"
                            type="default"
                            circle
                            @click="$refs.itemnote.up(props.index)">
                          </el-button>
                          <el-button
                            size="mini"
                            icon="el-icon-bottom"
                            type="default"
                            circle
                            @click="$refs.itemnote.down(props.index)">
                          </el-button>
                          <el-button
                            size="mini"
                            icon="el-icon-close"
                            type="default"
                            circle
                            @click="$refs.itemnote.del(props.index)">
                          </el-button>
                        </td>
                    </tr>
                  </template>
            </v-editmore>
          </el-form-item>           
          <el-form-item label="" prop="inlock">
            <el-button type="primary" @click="saveitem">保 存</el-button>
            <el-button @click="editDataItem.status = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="tc">  
      </div>
    </el-dialog>
    <!-- 编辑配置项结束 -->



  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        id: '',
        name: '',
        type: 'video',
        sort: 0
      },
      formitem: {
        id: '',
        model_id: 0,
        ident: '',
        name: '',
        type: 'select',
        inattr: '0',
        inspec: '1',
        sort: 0,
        data: [],
        note: []
      },
      editData: {
        status: false,
        title: '新增/修改模型',
        id: 0
      },
      editDataItem: {
        status: false,
        title: '新增/修改模型配置项',
        id: 0
      },
      rules: {
        name: [
          { type: 'string', required: true, message: "请输入模型名称", trigger: "blur" },
          { min: 1, message: "模型名称不能为空", trigger: "blur" }
        ],
      },
      itemrules: {
        ident: [
          { type: 'string', required: true, message: "请输入配置项标识", trigger: "blur" },
          { min: 1, message: "配置项标识不能为空", trigger: "blur" }
        ],
        name: [
          { type: 'string', required: true, message: "请输入配置项名称", trigger: "blur" },
          { min: 1, message: "配置项名称不能为空", trigger: "blur" }
        ]
      },
      params: {
        type: 'video',
        item: 1
      },
      cols: "200,110,0,130,120",
      menu: [{ key: 'sys', value: "系统" }, { key: 'console', value: "控制台" }]
    };
  },
  methods: {
    edit(item) {
      this.editData.status = true
      this.editData.id = item.id || 0
      this.form.id = this.editData.id
      this.form.name = item.name || ''      
      this.form.sort = item.sort || 0
      this.form.type = item.type || 'video'
    },    
    save() {
      let that = this
      that.form.type = that.params.type
      that.$refs['form'].validate((valid) => {
        if (valid) {
          let url = that.editData.id > 0 ? 'resources_model.edit_model' : 'resources_model.add_model'
          that.$api.post(url, that.form).then((res) => {
            if (res.status === 1) {
              this.$success(res.msg)
              that.$refs.list.fetchData()
              that.editData.status = false
            } else {
              that.$error(res.msg)
            }
          })
        }
      })
    },
    edititem(item) {
      this.editDataItem.status = true
      this.editDataItem.id = item.id || 0
      this.formitem.id = this.editDataItem.id
      this.formitem.model_id = item.model_id || 0
      this.formitem.type = item.type || 'select'
      this.formitem.ident = item.ident || ''
      this.formitem.inattr = item.inattr || '0'
      this.formitem.inspec = item.inspec || '1'
      this.formitem.name = item.name || ''      
      this.formitem.sort = item.sort || 0
      this.formitem.data = item.data || []
      this.formitem.note = item.note || []
    },
    saveitem() {
      let that = this
      that.formitem.data = that.$refs.itemdata.getData()
      that.formitem.note = that.$refs.itemnote.getData()
      that.$refs['form2'].validate((valid) => {
        if (valid) {
          let url = that.editDataItem.id > 0 ? 'resources_model.edit_model_item' : 'resources_model.add_model_item'
          that.$api.post(url, that.formitem).then((res) => {
            if (res.status === 1) {
              this.$success(res.msg)
              that.$refs.list.fetchData()
              that.editDataItem.status = false
            } else {
              that.$error(res.msg)
            }
          })
        }
      })
    },
    // 刷新缓存
    refresh() {
      this.$api.get('resources_model.refresh_model').then(res => {
        if (res.status === 1) {
          this.$success(res.msg)
          this.$refs.list.fetchData()
        }
      })
    },
    del(row) {
      let that = this
      that.$confirm('此操作会将该彻底删除，不可恢复, 是否继续?', '删除提醒').then(() => {
        that.$api.post('resources_model.del_model', { id: row.id }).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.$refs.list.fetchData()
          } else {
            that.$error(res.msg)
          }
        })
      }).catch(() => {
      })
    },
    delitem(row) {
      let that = this
      that.$confirm('此操作会将该彻底删除，不可恢复, 是否继续?', '删除提醒').then(() => {
        that.$api.post('resources_model.del_model_item', { id: row.id }).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.$refs.list.fetchData()
          } else {
            that.$error(res.msg)
          }
        })
      }).catch(() => {
      })
    }
  },
  mounted() {
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  width: 290px;
}
.resources-items-box {border:solid 1px #f3f3f3;}
.resources-items-box .resources-item {padding: 3px 11px; border-bottom:solid 1px #e0e0e0;}
.resources-items-box .resources-item span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  margin-right: 7px;
}
.resources-items-box .resources-item .item-name {display:inline-block; width: 130px; line-height:32px;}
.resources-items-box .resources-item .item-ident {display:inline-block; width: 70px; line-height:32px;}
.resources-items-box .resources-item .item-data {display:inline-block; line-height:32px;}
</style>
